<!--  -->
<template>
  <div>
    <div class="flex-main">
      <div class="flex-search">
        <quickSearch :advForm="quickSearchForm" @QuickSearch="handleSearchFunc">
          <template v-slot:concent>
            <el-form-item label="座席状态">
              <el-cascader
                @change="handleSearchFunc"
                class="mycascader"
                collapse-tags
                filterable
                :props="{ emitPath: false, multiple: true }"
                clearable
                v-model="quickSearchForm.form.status"
                :options="agentStateList"
                :show-all-levels="false"
              ></el-cascader>
            </el-form-item>
          </template>
        </quickSearch>
        <div>
          <el-button size="mini" @click="toSerach(false)">刷新</el-button>
        </div>
      </div>

      <div class="straightLine"></div>
      <!-- <Table :tableHeaders="tableHeaders" :tableData="tableData" :tableOperate='tableOperate' :agentState='agentState'  ref="myTable"></Table>
        <el-pagination
        class="pages"
        @current-change="flagFalse"
        :current-page.sync="pagingData.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="pagingData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagingData.total"
      >
      </el-pagination> -->
      <callTable
        :headers="tableHeaders1"
        :data="tableData"
        :pagingData="pagingData"
        :batchs="configBatchs"
        :tableHeightComputedFlag='false'
        @pageChange="flagFalse"
        @pageSizeChange="sizeChange"
        :selection="true"
        ref="callTabelRef"
        @batchClick="batchClick"
      >
        <template slot="column">
          <template v-for="(item, index) in tableHeaders1">
            <u-table-column
              :label="item.label"
              :key="item.prop"
              :width="item.width"
              :show-overflow-tooltip="true"
              v-if="['statusName'].includes(item.prop)"
            >
              <template slot-scope="scope">
                <div class="mylist">
                  <i
                    class="V7_iconfont V7_iconV7tubiao_dian"
                    :style="{
                      color: scope.row.login
                        ? getColor(scope.row.statusNumber)
                        : '#ccc',
                    }"
                  ></i>
                  {{ scope.row.login ? scope.row.statusName : "签出" }}
                  {{ toHMS(scope.row.statusDuration) }}
                </div>
              </template>
            </u-table-column>
            <u-table-column
              v-if="['loginType'].includes(item.prop)"
              :key="item.prop"
              :width="item.width"
              :label="item.label"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{
                  scope.row[item.prop] == "WEBRTC"
                    ? "软电话"
                    : scope.row[item.prop] == "PSTN"
                    ? "手机"
                    : scope.row[item.prop] == "ANSWEROFFLINE"
                    ? "离线接听"
                    : scope.row[item.prop] == "SIP"
                    ? "SIP话机"
                    : scope.row[item.prop]
                }}
              </template>
            </u-table-column>
            <u-table-column
               v-if="['onlineDuration'].includes(item.prop)"
              :key="item.prop"
              :width="item.width"
              :show-overflow-tooltip="true"
              :label="item.label"
            >
              <template slot-scope="scope">
                {{ toHMS(scope.row.onlineDuration) }}
              </template>
            </u-table-column>
            <u-table-column
              v-if="['customerNumber'].includes(item.prop)"
              :key="item.prop"
              :width="item.width"
              :show-overflow-tooltip="true"
              :label="item.label"
            >
              <template slot-scope="scope">
                <span :key="item.prop">{{
                  scope.row.customerNumber | getHideTel
                }}</span>
              </template>
            </u-table-column>
            <u-table-column
              v-if="['queueNumber'].includes(item.prop)"
              :key="item.prop"
              :width="item.width"
              :show-overflow-tooltip="true"
              :label="item.label"
            >
              <template slot-scope="scope">
                 {{scope.row.queueNumber
                    ? (queueListObj[scope.row.queueNumber]['name']) +
                      `(${scope.row.queueNumber})`
                    : ""}}
              </template>
            </u-table-column>
            <u-table-column
              v-if="['oprate'].includes(item.prop) && allFuns && allFuns.length"
              :key="item.prop"
              fixed="right"
              align="center"
              :label="item.label"
            >
              <template slot-scope="scope">
                <el-popover
                  placement="bottom"
                  popper-class="mwupopvoer"
                  v-if="
                    scope.row.agentNumber !==
                    $store.state.common.session.user.agentNumber
                  "
                  trigger="click"
                >
                  <div>
                    <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
                      :collapse="true"
                      active-text-color="#303133"
                    >
                      <el-menu-item
                        v-show="
                          menuShow(scope.row.statusNumber) &&
                          tableOperate.includes('listen') &&
                          callType !== 'listen' &&
                          getStatus
                        "
                        v-functions="['call_monitor_agent_listen']"
                        @click="listen(scope.row.agentNumber)"
                        index="1"
                      >
                        监听
                      </el-menu-item>
                      <el-menu-item
                        v-show="
                          menuShow(scope.row.statusNumber) &&
                          tableOperate.includes('listen') &&
                          callType === 'listen'
                        "
                        v-functions="['call_monitor_agent_listen']"
                        @click="handUpClick(scope.row.agentNumber)"
                        index="2"
                      >
                        取消监听
                      </el-menu-item>
                      <el-menu-item
                        v-show="
                          menuShow(scope.row.statusNumber) &&
                          tableOperate.includes('whisper') &&
                          callType !== 'whisper' &&
                          getStatus
                        "
                        v-functions="['call_monitor_agent_whisper']"
                        index="3"
                        @click="whisper(scope.row.agentNumber)"
                      >
                        耳语
                      </el-menu-item>
                      <el-menu-item
                        v-show="
                          menuShow(scope.row.statusNumber) &&
                          tableOperate.includes('whisper') &&
                          callType === 'whisper'
                        "
                        v-functions="['call_monitor_agent_whisper']"
                        @click="handUpClick(scope.row.agentNumber)"
                        index="4"
                      >
                        取消耳语
                      </el-menu-item>
                      <el-menu-item
                        @click="breakin(scope.row.agentNumber)"
                        v-show="
                          menuShow(scope.row.statusNumber) &&
                          tableOperate.includes('breakin') &&
                          getBreakInStatus &&
                          $store.state.cti.currentStatusObj.statusNumber !==
                            '5' &&
                          $store.state.cti.currentStatusObj.statusNumber !==
                            '15' &&
                          scope.row.statusNumber !== '14' &&
                          scope.row.statusNumber !== '15'
                        "
                        v-functions="['call_monitor_agent_breakin']"
                        index="3"
                      >
                        强插
                      </el-menu-item>
                      <el-menu-item
                        @click="hangup(scope.row.agentNumber)"
                        v-show="
                          menuShow(scope.row.statusNumber) &&
                          tableOperate.includes('hangup') &&
                          otherStatus
                        "
                        v-functions="['call_monitor_agent_hangup']"
                        index="6"
                      >
                        强拆
                      </el-menu-item>
                      <el-menu-item
                        @click="loot(scope.row.agentNumber, scope.row)"
                        v-show="
                          menuShow(scope.row.statusNumber, scope.row) &&
                          tableOperate.includes('loot') &&
                          otherStatus &&
                          !type
                        "
                        v-functions="['call_monitor_agent_loot']"
                        index="7"
                      >
                        抢接
                      </el-menu-item>
                      <el-menu-item
                        @click="loot(scope.row.agentNumber, scope.row)"
                        v-show="
                          menuShow(scope.row.statusNumber, scope.row) &&
                          tableOperate.includes('loot') &&
                          otherStatus &&
                          type === 'queue'
                        "
                        v-functions="['call_monitor_queue_loot']"
                        index="8"
                      >
                        抢接
                      </el-menu-item>
                      <el-menu-item
                        @click="loot(scope.row.agentNumber, scope.row)"
                        v-show="
                          menuShow(scope.row.statusNumber, scope.row) &&
                          tableOperate.includes('loot') &&
                          otherStatus &&
                          type === 'trunkNumber'
                        "
                        v-functions="['call_monitor_trunk_number_loot']"
                        index="9"
                      >
                        抢接
                      </el-menu-item>
                      <el-submenu
                        v-show="
                          !scope.row.login && tableOperate.includes('signin')
                        "
                        v-functions="['call_monitor_agent_signin']"
                        index="10"
                      >
                        <template slot="title">
                          签入<i class="el-icon-arrow-right myicon"></i>
                        </template>
                        <el-menu-item
                          @click="
                            loginIn(scope.row.agentNumber, 'PSTN', scope.row)
                          "
                          index="PSTN"
                          >手机</el-menu-item
                        >
                        <el-menu-item
                          index="SIP"
                          @click="loginIn(scope.row.agentNumber, 'SIP')"
                          >sip话机</el-menu-item
                        >
                      </el-submenu>
                      <el-menu-item
                        @click="
                          signout(scope.row.agentNumber);
                        "
                        v-show="
                          scope.row.login && tableOperate.includes('signout')
                        "
                        v-functions="['call_monitor_agent_signout']"
                        index="11"
                      >
                        签出
                      </el-menu-item>
                      <el-submenu
                        v-show="
                          change(
                            scope.row.statusNumber,
                            scope.row.login,
                            scope.row.superUniqueId
                          ) &&
                          tableOperate.includes('status') &&
                          scope.row.statusNumber != '8' &&
                          scope.row.loginType !== 'ANSWEROFFLINE' &&
                          scope.row.statusNumber !== '14' &&
                          scope.row.statusNumber !== '15'
                        "
                        v-functions="['call_monitor_agent_change_status']"
                        index="12"
                      >
                        <template slot="title">
                          状态切换<i class="el-icon-arrow-right myicon"></i>
                        </template>
                        <el-menu-item
                          @click="toChange(scope.row.agentNumber, item.number)"
                          v-for="(item, index) in agentState.filter(
                            (i) => i.number !== scope.row.statusNumber
                          )"
                          :index="item.number"
                          :key="index + 'li'"
                          >{{ item.name }}</el-menu-item
                        >
                      </el-submenu>
                    </el-menu>
                    <!-- <el-button v-for="(item, index) in tableOperate" @click="item.function(scope.row)" :key="index + 'button'"  type="text">{{item.name}}</el-button> -->
                  </div>
                  <span slot="reference" class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </el-popover>
              </template>
            </u-table-column>
            <u-table-column
               v-if="
                ![
                  'statusName',
                  'loginType',
                  'onlineDuration',
                  'customerNumber',
                  'queueNumber',
                  'oprate',
                ].includes(item.prop)
              "
              :width="item.width"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                {{ scope.row[item.prop] }}
              </template>
            </u-table-column>
          </template>
        </template>
      </callTable>
    </div>
    <el-dialog title="请选择SIP号" :visible.sync="visible">
      <span class="drop-span">SIP号:</span>
      <m7Select
        size="mini"
        style="width: 130px"
        v-model="sipNumber"
        placeholder="请选择"
        :options="sipArr"
        :defaultProps="{ label: 'number', value: 'number' }"
      ></m7Select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="bindSIP">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { commonAction, checkHideTel, isHasFuncOrMenus } from '@/utils/common';
import { checkPermission } from '@/utils/directive';

import { MonitoringModule } from '@/store/modules/monitoring';
import callTable from '@/components/configCommon/table.vue';
import { Component, Mixins, Prop, Ref } from 'vue-property-decorator';
import mixins from './mixins';
import { CommonModule } from '@/store/modules/common/index';
function getColor (val) {
  let res = '';
  switch (val) {
    case '0':
      res = '#3BB76B';
      break;
    case '1':
      res = '#FC6B5C';
      break;
    default:
      res = '#ccc';
      break;
  }
  return res;
}
@Component({
  name: 'Agent',
  filters: {
    getHideTel (customerNumber) {
      return checkHideTel(customerNumber);
    }
  },
  components: {
    callTable
  }
})
export default class extends Mixins(mixins) {
  @Prop({ default: () => [] }) public allData!: any;
  @Prop({ default: () => [] }) private agentState!: any;
  @Prop({ default: () => '' }) private type!: any;
  @Ref() private callTabelRef!: callTable

  private $message: any;
  private $prompt: any;
  private rowHeight = 55;
  private height = 500;
  private $store: any;
  private $confirm: any;
  private visible = false;
  private agentNumber = '';
  private nowId = '';
  private sipNumber = '';
  private tableCheckedList: any = [];
  private selectAllData: any = [];
  private currentAction: string = '';

  private quickSearchForm: any = {
    form: {
      agent: [],
      queue: [],
      status: []
    },
    advSearchOptions: []
  };

  private sipArr = [];

  private queueTablePages = {
    current: 1,
    pageSize: 10,
    total: 0
  };

  private allFuns = [
    'call_monitor_agent_listen',
    'call_monitor_agent_whisper',
    'call_monitor_agent_breakin',
    'call_monitor_agent_hangup',
    'call_monitor_agent_loot',
    'call_monitor_queue_loot',
    'call_monitor_trunk_number_loot',
    'call_monitor_agent_signin',
    'call_monitor_agent_signout',
    'call_monitor_agent_change_status'
  ]

  get getStatus () {
    // 0=> 空闲 1=> 忙碌 2=> 呼叫中 3=>振铃 4 =>通话中 5=> 整理  6=> 保持 7=> 静音 8=> 未连接 9=> 失效 10=> 咨询 11=> 三方  12 => 咨询（被咨询方） 13=>三方(被咨询方) 14=> 监听 15=> 耳语 100+ => 自定义状态
    const status = this.$store.state.cti.currentStatusObj.statusNumber || ''
    if (status === '1' || status.length > 2) {
      return true
    } else {
      return false
    }
  }

  private breakin (id) {
    MonitoringModule.breakin(id).then(res => {
      if (res.success) {
        this.nowId = id
        console.log(id, 123)
      }
    })
  }

  private configBatchs = [
    {
      name: '批量签出',
      action: 'batchCheckout',
      tipContent: '批量签出，会让已选座席退出登录，请谨慎操作！',
      _id: 'call_monitor_agent_batch_signout'
    }
  ];

  private batchClick (action, selectList) {
    this.tableCheckedList = selectList || [];
    this.currentAction = action;
    this[action](selectList);
  }

  private beforeMount () {
    this.configBatchs = this.configBatchs.filter((item) =>
      checkPermission(null, { value: [item._id] })
    );
  }

  // 判断座席状态不给正在通话等
  private statusNumberFlag (list) {
    return list.every((item) => {
      return (
        item.statusNumber !== '2' &&
        item.statusNumber !== '3' &&
        item.statusNumber !== '4' &&
        item.statusNumber !== '7' &&
        item.statusNumber !== '6' &&
        item.statusNumber !== '10' &&
        item.statusNumber !== '11' &&
        item.statusNumber !== '12' &&
        item.statusNumber !== '13'
      );
    });
  }

  private batchCheckout (selectList) {
    let statusFlag = false;
    const agentNumberAll = this.selectAllData.map((item) => item.agentNumber);

    if (typeof selectList === 'object') {
      // 单个操作
      const firlter = this.selectAllData.filter((item) =>
        selectList.some((item1) => item.agentNumber === item1)
      );
      statusFlag = this.statusNumberFlag(firlter);
    } else {
      // 全选后批量签出
      statusFlag = this.statusNumberFlag(this.selectAllData);
    }
    const obj =
            typeof selectList === 'object' ? selectList : agentNumberAll;
    const isMy = obj.some(itme => itme === this.$store.state.common.session.user.agentNumber)
    if (isMy) {
      this.$message('包含当前座席不能签出')
      return
    }
    if (statusFlag) {
      this.$confirm('批量签出会让已选座席退出登录，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          MonitoringModule.batchSignout(obj).then((res) => {
            if (res.success) {
              this.$message.success('成功');
              this.$nextTick(() => {
                (this.$refs as any).callTabelRef.cancelSelectFun()
              })
            }
          });
        })
        .catch(() => {
          this.$message('已取消签出');
        });
    } else {
      this.$message.error('部分座席正在通话中，不可签出，请重新选择');
    }
  }

  private bindSIP () {
    if (!this.sipNumber) {
      this.$message.error('请选择sip号');
      return;
    }
    const data = { agentNumber: this.agentNumber, sipNumber: this.sipNumber };
    commonAction({
      url: '/call/action/monitor/agent/bind/sip',
      method: 'post',
      data
    }).then((res) => {
      if (res.success) {
        this.$message.success('绑定成功');
        this.visible = false;
      }
    });
  }

  private tochange (id, status) {
    MonitoringModule.status({ id, status }).then(res => {
      console.log(res)
    })
  }

  private loginIn (id, status, row) {
    MonitoringModule.signin({ id, status }).then((res) => {
      if (res.success) {
        this.$message.success('成功');
      } else {
        if (res.message === '座席未绑定手机号') {
          this.$prompt('座席未绑定手机号, 请输入', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^\d+$/,
            inputErrorMessage: '手机格式不正确'
          }).then(({ value }) => {
            const actionData = {
              url: '/call/action/monitor/agent/bind/mobile',
              method: 'POST',
              data: { mobile: value, agentNumber: id }
            };
            commonAction(actionData).then((resq) => {
              if (resq.success) {
                this.$message.success('绑定成功');
              }
            });
          });
        }
        if (res.message === '座席未绑定SIP号') {
          const actionData = {
            url: '/call/action/general/query',
            method: 'POST',
            data: { types: ['availableSipNumberList'] }
          };
          commonAction(actionData).then((r) => {
            if (r && r.success) {
              const resList = r.availableSipNumberList || [];
              this.sipArr = resList;
              this.visible = true;
              this.agentNumber = id;
            }
          });
        }
      }
    });
  }

  get otherStatus () {
    const status = this.$store.state.cti.currentStatusObj.statusNumber || ''
    if (status === '0' || status === '1' || status.length > 2) {
      return true
    } else {
      return false
    }
  }

  get getBreakInStatus () {
    const status = this.$store.state.cti.currentStatusObj.statusNumber || ''
    if (status === '1' || status.length > 2 || status === '14') {
      return true
    } else {
      return false
    }
  }

  private loot (id, row) {
    if (this.type === 'queue') {
      MonitoringModule.queueLoot(row.callId).then((res) => {
        console.log(res);
      });
    } else if (this.type === 'trunkNumber') {
      MonitoringModule.trunkNumberLoot(row.callId).then((res) => {
        console.log(res);
      });
    } else {
      MonitoringModule.loot(id).then((res) => {
        console.log(res);
      });
    }
  }

  private hangup (id) {
    MonitoringModule.hangup(id).then((res) => {
      console.log(res);
    });
  }

  private change (number, login, superId) {
    if (superId) {
      return false;
    }
    if (login && number !== '8') {
      return true;
    } else {
      return false;
    }
  }

  private toChange (id, status) {
    MonitoringModule.status({ id, status }).then((res) => {
      console.log(res);
    });
  }

  private signout (id) {
    this.$confirm('签出操作会让座席退出登录，是否签出？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        MonitoringModule.signout(id).then((res) => {
          if (res.success) {
            this.$message.success('成功');
          }
        });
      })
      .catch(() => {
        //
      });
  }

  private listen (id) {
    MonitoringModule.listen(id).then((res) => {
      if (res.success) {
        this.nowId = id;
        console.log(id, 123);
      }
    });
  }

  private handUpClick () {
    // 真挂机
    const actionData = {
      url: '/call/action/biz/hangup',
      method: 'POST',
      data: { superUniqueId: this.$store.state.cti.superUniqueId }
    };
    commonAction(actionData).then((res) => {
      if (res.success) {
        const statusObj = this.$store.state.cti.currentStatusObj;
        console.log(statusObj, 123);
      }
    });
  }

  private whisper (id) {
    MonitoringModule.whisper(id).then((res) => {
      console.log(res);
    });
  }

  get callType () {
    const statusObj = this.$store.state.cti.currentStatusObj
    if (statusObj.callEvent !== 'hangup') {
      console.log('statusObj.callType', statusObj.callType);
      return statusObj.callType
    } else {
      return null
    }
  }

  private getColor (val) {
    let res = '';
    switch (val) {
      case '0':
        res = '#3BB76B';
        break;
      case '1':
        res = '#FC6B5C';
        break;
      default:
        res = '#ccc';
        break;
    }
    return res;
  }

  private menuShow (statusNumber, row) {
    if (statusNumber === '4') {
      return true;
    }
    if (row?.queueStartTime) {
      console.log(row);
      return true;
    }
    return false;
  }

  private sizeChange (size: number) {
    this.pagingData.limit = size;
  }

  private mounted () {
    setTimeout(() => {
      this.quickSearchForm.advSearchOptions = [
        {
          label: '技能组',
          inputType: 'select',
          selectData: this.queueList,
          name: 'queue',
          clearable: true,
          filterable: true,
          multiple: true,
          defaultProp: { label: 'name', value: '_id' }
        },
        {
          label: '座席',
          inputType: 'select',
          selectData: this.userList,
          name: 'agent',
          filterable: true,
          multiple: true,
          clearable: true,
          defaultProp: { label: 'realName', value: '_id' }
        }
        // { label: '座席状态', inputType: 'select', selectData: this.agentState, name: 'status', clearable: true, filterable: true, multiple: true, defaultProp: { label: 'name', value: 'number' } }
      ];
    }, 1000);
    // 操作权限
    this.allFuns = this.allFuns.filter(item => isHasFuncOrMenus(item, this.$store.state.common.session.user, false))
  }

  // private tableHeaders = [
  //   { label: '座席', prop: 'agentName', formatter: row => `${row.agentNumber} ${row.agentName ? '(' + row.agentName + ')' : ''}`, width: '200' },
  //   {
  //     label: '当前状态',
  //     prop: 'statusName',
  //     formatter: row => {
  //       const h = this.$createElement
  //       return h('div', { class: 'mylist' },
  //         [
  //           h('i', {
  //             class: 'V7_iconfont V7_iconV7tubiao_dian',
  //             style: `color:  ${row.login ? getColor(row.statusNumber) : '#ccc'}`
  //           }),
  //           `${row.login ? row.statusName : '签出'} (${this.toHMS(row.statusDuration)})`
  //         ])
  //     },
  //     width: '200'
  //   },
  //   {
  //     label: '接听方式',
  //     prop: 'loginType',
  //     formatter: row => {
  //       if (row.loginType === 'WEBRTC') {
  //         return '软电话'
  //       }
  //       if (row.loginType === 'PSTN') {
  //         return '手机'
  //       }
  //       if (row.loginType === 'ANSWEROFFLINE') {
  //         return '离线接听'
  //       }
  //       if (row.loginType === 'SIP') {
  //         return 'SIP话机'
  //       }
  //       return row.loginType
  //     }
  //   },
  //   { label: '登录时长', prop: 'onlineDuration', formatter: row => this.toHMS(row.onlineDuration) },
  //   { label: '技能组', prop: 'queueNumber', formatter: row => row.queueNumber ? this.queueListObj[row.queueNumber]?.name + `(${row.queueNumber})` : '' },
  //   { label: '客户号码', prop: 'customerNumber', width: '200' },
  //   { label: '呼入数', prop: 'incomingCount' },
  //   { label: '呼入接通数', prop: 'incomingAnswered' },
  //   { label: '外呼数', prop: 'outgoingCount' },
  //   { label: '外呼接通数', prop: 'outgoingAnswered' }
  //   // { label: '操作', formatter: }
  // ]

  private tableHeaders1 = [
    { label: '座席', prop: 'agentName', width: 200 },
    { label: '当前状态', prop: 'statusName', width: 150 },
    { label: '接听方式', prop: 'loginType' },
    { label: '登录时长', prop: 'onlineDuration' },
    { label: '技能组', prop: 'queueNumber' },
    { label: '客户号码', prop: 'customerNumber', width: 200 },
    { label: '呼入数', prop: 'incomingCount' },
    { label: '呼入接通数', prop: 'incomingAnswered' },
    { label: '外呼数', prop: 'outgoingCount' },
    { label: '外呼接通数', prop: 'outgoingAnswered', width: 200 },
    {
      label: '操作',
      prop: 'oprate',
      disenable: true
    }
  ];

  get tableOperate () {
    return [
      'listen',
      'whisper',
      'breakin',
      'hangup',
      'loot',
      'signin',
      'signout',
      'status'
    ];
  }

  private flag = false;

  private handleSearchFunc (ost) {
    this.flag = true;
    this.$nextTick(() => {
      (this.$refs as any).callTabelRef.cancelSelectFun()
    })
  }

  private flagFalse (page) {
    this.pagingData.page = page;
    this.flag = false;
  }

  get tableData () {
    return this.handleCurrentChange() || [];
  }

  // private tableData: any = []
  private handleCurrentChange (val?: any, flag?: boolean) {
    const { agent, status, queue } = this.quickSearchForm.form;
    const data = this.allData.filter((item) => {
      const agentFlag = agent.length ? agent.includes(item.agentId) : true;
      // const statusFlag = status.length ?  status.includes(item.statusNumber) : true
      const statusFlag = getStatusFlag(status, item);
      const queueFlag = getQueueFlag(queue, item);
      return statusFlag && agentFlag && queueFlag;
    });
    this.selectAllData = data
    console.log('筛选数组', this.selectAllData);
    this.pagingData.total = data.length;
    const list: any = [];
    if (this.flag) {
      this.pagingData.page = 1;
    }
    const { limit, page } = this.pagingData;
    for (let i = (page - 1) * limit; i < page * limit; i++) {
      const element = data[i];
      if (element) {
        list.push(element);
      }
    }
    return list || [];

    function getStatusFlag (s, item) {
      if (!s) {
        return true;
      }
      if (!s.length) {
        return true;
      }
      if (s.includes('11')) {
        s.push('13');
      }
      const flagList: boolean[] = [];
      if (s.includes('ANSWEROFFLINE')) {
        // 离线接听
        flagList.push(item.loginType === 'ANSWEROFFLINE');
      }
      if (s.includes('loginfalse')) {
        // 签出状态
        flagList.push(item.login === false);
      } else {
        return (
          (item.login && s.includes(item.statusNumber)) ||
          flagList.find((i) => i)
        );
      }
      flagList.push(s.includes(item.statusNumber));
      return flagList.find((i) => i);
    }

    function getQueueFlag (q, item) {
      if (!q.length) {
        return true;
      }
      if (!item.queueList.length) {
        return false;
      }
      for (let i = 0; i < q.length; i++) {
        const element = q[i];
        if (item.queueList.includes(element)) {
          return true;
        }
      }
      return false;
    }
  }

  private pagingData = {
    limit: 10,
    total: 0,
    page: 1
  };

  get agentStateList () {
    const login: any = [];
    for (let index = 0; index < this.agentState.length; index++) {
      const element = this.agentState[index];
      login.push({ value: element.number, label: element.name });
    }
    login.unshift({ label: '未连接', value: '8' });
    login.push({ label: '整理', value: '5' });
    const call = [
      { label: '呼叫中', value: '2' },
      { label: '振铃', value: '3' },
      { label: '通话中', value: '4' },
      { label: '保持', value: '6' },
      { label: '静音', value: '7' },
      { label: '失效', value: '9' },
      { label: '咨询', value: '10' },
      { label: '三方', value: '11' },
      { label: '咨询来电', value: '12' }
    ];
    const list = [
      {
        value: 'q1',
        label: '登录状态',
        children: login
      },
      {
        value: 'q2',
        label: '通话中状态',
        children: call
      },
      {
        value: 'q3',
        label: '离线状态',
        children: [
          { label: '签出', value: 'loginfalse' },
          { label: '离线接听', value: 'ANSWEROFFLINE' }
        ]
      }
    ];

    return list;
  }

  get queueListObj () {
    return CommonModule.publicCache.queueListObj;
  }
}
</script>
<style lang="stylus" scoped>
.flex-search
  display flex
  justify-content space-between
  align-items center
.pages
  text-align right
  margin 10px 0
/deep/.mycascader
  width: 210px
  .el-input--mini
    height: 30px!important
    input
      height: 30px!important
/deep/.el-cascader__tags
  width: calc(100% - 25px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: left;
  align-items: center;
  input
    min-width 30px
  & .el-tag--light:first-child
    max-width: 80px

/deep/.monitorTableHeader
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #303753;
  .cell.umy-table-beyond
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
/deep/.monitorTable
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #686E84;
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/deep/.el-menu
  border-right none
/deep/.myicon
  font-size 12px
/deep/.el-menu-vertical-demo
  .el-menu-item
    height: 24px;
    line-height: 24px;
  .el-submenu .el-submenu__title
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    line-height: 24px;

</style>
<style >
.mwupopvoer {
  min-width: unset!important
}
.mwupopvoer .el-menu--collapse {
  width: unset;
  text-align: center;
}
.el-menu--vertical .el-menu-item {
  height: 24px;
  line-height: 24px;
  margin: 5px 10px
}
</style>
